<template>
	<view>
		<nav-bar title="车辆档案管理"></nav-bar>
		<view>
			<up-list @scrolltolower="scrolltolower" >
				<up-list-item v-for="(item, index) in indexList" :key="item.coid" @click="handleClickItem(item)">
					<!-- <uni-section> -->
						<!-- <up-cell-group :customStyle='groupStyle'> -->
							<view class="units-list">
								<view class="units-list-item">
									<view class="units-list-item-content">
											<view class="units-list-item-content-title">
												{{ item.companyname }}
											</view>
											<view class="units-list-item-content-desc">
												{{item.carname}}
											</view>
									</view>
									<view class="units-list-item-content">
											<view class="units-list-item-content-model location">
												<text>车型：{{item.carmodel}}</text>
											</view>
											<view class="units-list-item-content-desc">
												
												<text>{{item.carbrandsys}}</text>
											</view>
									</view>
		
								</view>
								<view class="units-list-item-arrow">
									<u-icon name="arrow-right" color= "#D2D5D8">
										
									</u-icon>
								</view>
							</view>
			
						<!-- </up-cell-group> -->
					<!-- </uni-section> -->
				</up-list-item>
				<up-loadmore v-show="noMore" status="nomore" />
			</up-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import NavBar from '@/components/NavBar.vue';
import { getCarList } from '@/api/use';
	const indexList = ref([]);
	const currentPage = ref(1);
	const groupStyle = ref({
		'background-color': '#fff'
	});
	const nomoreText = ref('没有更多了');
	 const noMore = ref(false);
	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		// currentPage.value = 1;
		// loadmore();
		currentPage.value++;
		loadmore()
	};

	const loadmore = () => {
		serverCarList()
	};

	function serverCarList(){
		let params = {
			PZ:10,
			PN:currentPage.value,
			type:1,
			version:0
		}
		getCarList(params).then(res => {
			if(res.code === 1){
				if(currentPage.value === 1){
					indexList.value.splice(0);
				}
				// indexList.value = res.data.table;
				res.data.table.forEach(element => {
					indexList.value.push(element);
				});
				if(res.data.table.length<10){
					noMore.value=true
				}else{
					noMore.value=false
				}
			}else{
				noMore.value=false
			}
		})
	}
	//  点击列表项
	function handleClickItem(item) {
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/use/car/detail/index?id=' + item.cid
		})

	}
</script>

<style lang="scss" scoped>
	.units-list {
		padding: $uni-spacing-row-lg;
		background-color: #fff;
		border-bottom: 1px solid #E8EBEE;
		display: flex;
		flex-direction: row;
		&-item {
			display: flex;
			flex-direction: column;
			width: calc(100% - 20px);
			&-content {
				// flex: 1;
				display: flex;
				flex-direction: row;
				margin-left: $uni-spacing-row-lg;
				align-items: center;
	
				&-title {
					font-size: 15px;
					color: #333;
					margin-top:$uni-spacing-row-sm ;
					width: 70%;
				}
				&-model {
					font-size: 13px;
					color: #999;
					margin-top:$uni-spacing-row-sm ;
					width: 60%;
				}
				&-desc {
					text-align: right;
					font-size: 13px;
					color: #999;
					width: 100%;
					
				}
	
	
			}
			&-arrow{
				margin-left: 10px;
				display: flex;
				
				align-items: center;
				text-align: right;
			}
		}
	}
</style>